<!-- 活动明细（含可报名） -->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">活动信息</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F5F5F5;">
			<!--图片区域-->
			<view class="r_img_box">
				<image :src="imgUrl" class="r_img"></image>
			</view>
			<!--活动名称、日期、地址区域-->
			<view class="r_box">
				<view class="r_box_row1"><span style="padding: 10rpx;"></span>{{peName}}</view>
				<view class="r_box_row2" style="margin-top: 10rpx;">
					<view class="r_box_row2_L"><image src="../../static/c_shijian.png" style="width:40rpx;height:40rpx;"></view>
					<view class="r_box_row2_R">{{startTime}}</view>
				</view>
				<view class="r_box_row2_textarea" style="margin-top: 10rpx;">
					<view class="r_box_row2_L"><image src="../../static/c_xingcheng.png" style="width:40rpx;height:40rpx;"></view>
					<view class="r_box_row2_R_textarea">{{peAddress}}</view>
				</view>
				<view class="space_25"></view>
			</view>
			<!--活动简介块-->
			<view class="r_box">
				<view class="r_box_row1"><span style="padding: 10rpx;"></span>活动介绍</view>
				<view class="r_box_row2_textarea"><span style="padding: 10rpx;"></span>{{peProfile}}</view> 
				<view class="space_25"></view>
			</view>
			<!--联系人、名额、已报人数-->
			<view class="r_box">
				<view class="r_box_row2_textarea"><span style="padding: 10rpx;"></span>联系人：{{contact}}<span style="padding: 20rpx;"></span>{{phone}}</view>
				<view class="r_box_row2_textarea"><span style="padding: 10rpx;"></span>适合人群：{{peObject}}</view>
				<view class="r_box_row2_textarea"><span style="padding: 10rpx;"></span>总名额：{{totalCount}}人</view>
				<view class="r_box_row2_textarea"><span style="padding: 10rpx;"></span>已报名：{{signUpCount}}人</view>
				<view class="space_25"></view>
			</view>
			<!--在按钮上门加一个空行-->
			<view class="space_80"></view>
			<!--底部悬浮操作按钮-->
			<view v-if="btnShow" class="hover_btn_box"  @click="submitForm()">我要报名</view>
			<view v-if="btn2Show" class="hover_btn_box" @click="gotoReg()">点此按钮注册</view>
			<view v-if="btn3Show" class="hover_btn_box btn_notClick">您已报名或已满额</view> 
			<view class="space_120"></view>
			
			<u-tabbar v-if="toolbarShow" :value="bottomTab" @change="name => bottomTab = name" activeColor="#1485FF">
				<u-tabbar-item text="首页" icon="home" @click="gotoIndex()"></u-tabbar-item>
				<u-tabbar-item text="活动列表" icon="list" @click="gotoActi()"></u-tabbar-item>
				<u-tabbar-item text="我的活动" icon="list-dot" @click="gotoMyActi()"></u-tabbar-item>
			</u-tabbar>
		</view> 
		
		<u-popup :show="showPup" mode="center" round="10" height="500rpx" bgColor="#FFFFFF"> 
			<view class="pop_box">
				<view class="pop_lineT">领奖凭证	</view>
				<view class="pop_line1">姓名：{{nickName}}</view>	
				<view class="pop_line1">电话：{{phonenumber}}</view>
				<view class="space_xx"></view>
				<view class="pop_line2">
					<view class="pop_btn" @click="closePopup()">关闭</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				bottomTab: undefined, //底部链接tabbar高亮控制
				isActiadmin:false, //是否是活动管理员（可以发起与参与活动），底部链接tabbar显示控制
				showPup: false, //用户姓名与电话弹层控制
				nickName:"", //弹层显示姓名
				phonenumber:"",  //弹层显示电话
				
				//页面传参
				actiId:"", //活动id
				flag:"" , //由正常链接跳转过来
				playerStatus:"", //当前用户是否已经报名
				btnShow:false, //报名按钮是否显示
				
				//页面赋值
				imgUrl:"", //缩略图地址
				peName:"", //活动名称
				peProfile:"", //活动内容
				startTime:"", //活动开始时间
				peAddress:"", //活动地址
				contact:"", //活动联系人
				phone:"", //联系电话
				peObject:"", //适合人群
				totalCount:0, //活动总名额 
				signUpCount:0, //报名总人数
				
				//提交参数
				form: { 
				  playEventId: undefined, //活动id
				  player:undefined,//识别唯一的报名者（存放user.userName）
				  playerNic: undefined, //报名者姓名（存放姓名）
				  signUpTime: undefined, //报名时间
				  remark: "", //备注
				},
				
				//其他应用链接进入小程序 
				btn2Show:false, //未注册用户使用的按钮
				btn3Show:false, //报名人数已满
				isReg:false, //是否是已注册用户
				toolbarShow:false, //非注册用户不显示toolbar
				//在此之上补充变量
			}
		},
		onLoad(option) {
			console.log("参数option==",option);
			// uni.$u.toast("参数option=="+option);
			console.log("全局活动明细保存的url==",getApp().globalData.actiDetailUrl);
			getApp().globalData.actiDetailUrl=""; //url初始化
			
			//以下是配合web端扫码的新处理代码
			var p=JSON.stringify(option);
			if(p!="{}"){
				if(option.hasOwnProperty('q') && option.q){
					//通过下面这步解码，可以拿到url的值
					var url=decodeURIComponent(option.q);
					// uni.$u.toast('二维码解析url=='+url);
					console.log("二维码解析url",url);
					//对url中携带的参数提取处理
					this.actiId=url.split("=")[1];
					console.log("二维码中参数actiId==",this.actiId);
					// setTimeout(() => { 
					// 	uni.$u.toast('二维码中参数actiId=='+this.actiId); 
					// }, 3000);
				}else{
					this.actiId=option.actiId;
					console.log("正常链接参数actiId==",this.actiId);
					// uni.$u.toast('正常链接参数actiId=='+this.actiId);
				}
			}
			//以上是配合web端扫码的新处理代码
			console.log("参数actiId==",this.actiId);
			
			var that=this;
			//第一步：取code
			wx.login({ //取code
				success:(res)=>{
					console.log(res);
					let code=res.code;
					let obj={};
					obj.code=code;
					obj.appid=getApp().globalData.appId;
					//进入第二步：在取到code的基础上调用本地接口获取openid（第二步中有包含第三步的调用，第三步中又包含第四步的调用）
					utils.getOpenId(obj).then(res => {
						console.log('获取活动明细页面的getOpenId接口返回值==',res); 
						if(res.data.code==200 && res.data.data.openid!=null){ //第二个条件是防止接口返回200，但openid为null
							let openid=res.data.data.openid;
							let unionid=res.data.data.unionid; //使用新逻辑
							//openid="oXVE244m2QMKrqQgxlgbszG1QqfE";//老孙的测试用
							getApp().globalData.openid=openid;
							getApp().globalData.unionid=unionid;
							console.log("***********获取的用户openid：",openid);
							console.log("***********获取的用户unionid：",unionid);
							//进入第三步：根据openid进行登陆
							//openid="aa";//测试一个非注册用户
							utils.loginByWX(unionid).then(res => {
								console.log('获取活动明细页面的loginByWX接口返回值==',res); 
								if(res.data.code==200){
									let access_token=res.data.data.access_token;//获取access_token并保存在全局变量中
									getApp().globalData.access_token=access_token;
									console.log('loginByWX接口token返回值==',access_token);
									console.log('全局变量中的token值==',getApp().globalData.access_token);
									let roles=res.data.data.roles;
									getApp().globalData.roles=roles;
									console.log('获取活动明细页面的loginByWX接口角色返回值==',roles); 
									console.log('全局变量中的roles值==',getApp().globalData.roles);
									//第四步：给全局变量中的角色布尔变量赋值
									if(roles.indexOf("技能培训管理员")!=-1){
										getApp().globalData.isSktradmin=true;
									}
									if(roles.indexOf("活动管理员")!=-1){
										getApp().globalData.isActiadmin=true;
									}
									if(roles.indexOf("检测评估管理员")!=-1){
										getApp().globalData.isDeevadmin=true;
									}
									if(roles.indexOf("检测评估执行员")!=-1){
										getApp().globalData.isDeevjob=true;
									}
									console.log('获取活动明细页面的全局变量中的角色值==',getApp().globalData.isSktradmin,getApp().globalData.isActiadmin,
									            getApp().globalData.isDeevadmin,getApp().globalData.isDeevjob,getApp().globalData.isMp_normal);
															
									//进入第四步：获取注册用户基本信息，并保存到全局变量中 
									utils.getUserInfo().then(res => {
										console.log('getUserInfo接口返回值==',res); 
										if(res.data.code==200){
											getApp().globalData.user=res.data.user;
											that.nickName=getApp().globalData.user.nickName; //2024-10-13为老干部局活动弹层准备
											that.phonenumber=getApp().globalData.user.phonenumber; //2024-10-13为老干部局活动弹层准备
											console.log('获取活动明细页面的全局变量中的user值==',getApp().globalData.user);
											
											//注册用户获取活动详细信息
											that.toolbarShow=true; //注册用户显示底部导航
											that.isActiadmin=getApp().globalData.isActiadmin;
											console.log("获取活动明细页面的用于底部显示控制的变量isActiadmin==",that.isActiadmin);
											that.getActiById();
										}
										if(res.data.code==500){
											let msg=res.data.msg;
											uni.navigateTo({
												url:'../error/error?errorMsg='+msg 
											})
										}
									}).catch(error => {
										uni.navigateTo({
											url:'../error/error?errorMsg='+error
										})
									})
								}
								if(res.data.code==500){
									let msg=res.data.msg;
									//并且res.data.msg中有“不存在”3个字，跳转到注册页
									if(msg.indexOf("不存在")!=-1){
										that.isReg=false;
										that.btn2Show=true;
										that.btnShow=false; //报名按钮不显示
										that.btn3Show=false; //已满按钮不显示
										getApp().globalData.actiDetailUrl="../acti/actiDetail?actiId="+that.actiId;
										console.log("非注册用户保存的url==",getApp().globalData.actiDetailUrl);
										that.getActiByIdOpen();//非注册用户获取活动详细信息
									}else if(msg.indexOf("对不起")!=-1){
										uni.showModal({
											title: '提示',
											content: '登录失败，该账号已被注销或删除！',
											showCancel: false ,
											confirmText: '关闭',
											success: res => {
												if (res.confirm) {
													wx.exitMiniProgram({
														success: function(){
															console.log("退出成功！！！"); 
														},
														fail: function(err){
															console.log("退出失败！！！",err);
															uni.navigateTo({
																url:'../error/error?errorMsg='+err.errMsg
															})
														}
													})
												}
											}
										})
										//uni.showModal结束
									}else{
										uni.navigateTo({
											url:'../error/error?errorMsg='+msg 
										})
									}
									
								}
							}).catch(error => {
								console.log("loginByWX捕获错误",error);
								uni.navigateTo({
									url:'../error/error?errorMsg='+error
								})
							})
						}
						if(res.data.code==500){
							let msg=res.data.msg;
							uni.navigateTo({
								url:'../error/error?errorMsg='+msg 
							})
						}
					}).catch(error => {
						uni.navigateTo({
							url:'../error/error?errorMsg='+error
						})
					})
				}
			})
		},
		methods: {
			//顶部导航回退箭头点击触发
			leftClick(){
				uni.navigateBack();
			},
			//打开用户报名信息弹层
			openPopup(){
				this.showPup=true;
			},
			//关闭用户报名信息弹层
			closePopup(){
				this.showPup=false;
			},
			//根据id获取活动的详细信息
			getActiById(){
				var that=this;
				utils.getPlayEvent(that.actiId).then(res => {
					console.log('获取活动明细接口的返回值==',res); 
					if(res.data.code==200){
						that.peName=res.data.data.peName;
						that.peProfile=res.data.data.peProfile; //活动内容
						that.startTime=res.data.data.startTime.substr(0,10); //活动开始时间
						that.peAddress=res.data.data.peAddress; //活动地址
						that.peObject=res.data.data.peObject; //适合人群
						that.signUpCount=res.data.data.signUpCount; //已报名人数
						that.contact=res.data.data.contact; //联系人
						that.phone=res.data.data.phone; //联系电话
						that.totalCount=res.data.data.totalCount==null?0:res.data.data.totalCount;
						if(that.signUpCount==that.totalCount){ //2023-11-03新补充
							that.btn2Show=false; //注册按钮不显示
							that.btnShow=false; //报名按钮不显示
							that.btn3Show=true; //已满按钮显示
						}
						that.playerStatus=res.data.data.playerStatus;
						if(that.playerStatus==null){ //表示未报名
							if(!that.btn3Show){
								that.btnShow=true;
							}
						}
						if(that.playerStatus=="sign_up" || that.playerStatus=="sign_in"){ //表示已报名或是已经报名并签到
							that.btn3Show=true;
							that.showPup=true; //2024-10-13为老干部局活动弹层准备
						}
						let playEventAppendixList=res.data.data.playEventAppendixList;
						if(playEventAppendixList.length>0){
							that.imgUrl=playEventAppendixList[0].url;
						}
						console.log('获取明细方法后按钮的显示状态是==',that.btnShow,that.btn2Show,that.btn3Show);
					}
					if(res.data.code==500){
						let msg=res.data.msg;
						uni.navigateTo({
							url:'../error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'../error/error?errorMsg='+error
					})
				})
				
			},
			//根据id获取活动的详细信息
			getActiByIdOpen(){
				var that=this;
				utils.getPlayEventOpen(that.actiId).then(res => {
					console.log('获取活动明细开放接口的返回值==',res); 
					if(res.data.code==200){
						that.peName=res.data.data.peName;
						that.peProfile=res.data.data.peProfile; //活动内容
						that.startTime=res.data.data.startTime; //活动开始时间
						that.peAddress=res.data.data.peAddress; //活动地址
						that.peObject=res.data.data.peObject; //适合人群
						that.signUpCount=res.data.data.signUpCount; //已报名人数
						that.totalCount=res.data.data.totalCount==null?0:res.data.data.totalCount;
						if(that.signUpCount==that.totalCount){ //2023-11-03新补充
							that.btn2Show=false; //注册按钮不显示
							that.btnShow=false; //报名按钮不显示
							that.btn3Show=true; //已满按钮显示
						}
						let playEventAppendixList=res.data.data.playEventAppendixList;
						if(playEventAppendixList.length>0){
							that.imgUrl=playEventAppendixList[0].url;
						}
					}
					if(res.data.code==500){
						let msg=res.data.msg;
						uni.navigateTo({
							url:'../error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'../error/error?errorMsg='+error
					})
				})
			},
			//报名提交
			submitForm() {
				var that=this;
				this.form.playEventId=this.actiId;
			  this.form.player=getApp().globalData.user.userName;
				this.form.playerNic=getApp().globalData.user.nickName;
			  this.form.signUpTime=utils.getCurTime();
			  //取当前时间并格式化
			  console.log("提交的form==",this.form);
			  //debugger;
				uni.showModal({
					title: '提示',
					content: '确定报名吗？',
					success: function(res) {
						if (res.confirm) {
							//执行确认后的操作
							utils.addPlayEventPlayer_bm(that.form).then(res => {
								console.log('addPlayEventPlayer_bm报名接口返回值==',res); 
								if(res.data.code==200){
									//给出toast提示
									uni.$u.toast('报名成功！');
									//跳转到列表页（暂时屏蔽页面跳转）
									// setTimeout(function(){
									// 	that.gotoActi();
									// }, 2000);
									that.showPup=true; //2024-10-13为老干部局活动弹层准备
									that.btn2Show=false; //注册按钮不显示（2024-10-13）
									that.btnShow=false; //报名按钮不显示 （2024-10-13）
									that.btn3Show=true; //已报或已满满按钮显示（2024-10-13）
								}
								if(res.data.code==500){
									let msg=res.data.msg;
									if(msg.indexOf("Duplicate")!=-1){
										uni.showModal({
											title: '提示',
											content: '您已报名，不用重复报名！',
											showCancel: false ,
											confirmText: '关闭',
											success: res => {
												if (res.confirm) {
													that.btn2Show=false; //注册按钮不显示 
													that.btnShow=false; //报名按钮不显示 
													that.btn3Show=true; //已满按钮显示
												}
											}
										})
										//uni.showModal结束
									}else{
										uni.navigateTo({
											url:'../error/error?errorMsg='+msg 
										})
									}
								}
							}).catch(error => {
								uni.navigateTo({
									url:'../error/error?errorMsg='+error
								})
							})
						} 
						else {
							//执行取消后的操作
						}
					}
				})
			},
			
			//底部导航链接
			gotoActi(){ //所有的可报名的活动
				uni.navigateTo({
					url:"./acti" ,
				});
			},
			gotoMyActi(){ //我报名参与的活动（含未开始的已结束的所有活动）
				uni.navigateTo({
					url:"./myActi" ,
				});
			},
			gotoMyActi_M() { //我创建的活动列表
				uni.navigateTo({
					url:"../acti_M/myActi_M" , 
				});
			},
			gotoIndex(){
				uni.navigateTo({
					url:"../init/init" , 
				});
			},
			gotoReg(){
				uni.navigateTo({
					url:"../init/init" , 
				});
			},
			//在此上方补充函数
		}
	}
</script>

<style lang="scss">
/*页面整体区域*/
.page_all{
	width: 750rpx;
	height: 100vh;
	background-color: #FFFFFF; /*背景颜色根据实际情况调整*/
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
/*title区域*/
.page_titleArea{ 
	width: 750rpx;
	height: 180rpx;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-shrink: 0; /*表示不可被压缩*/
	background-color: #1485FF;
}
.page_title_line{ /*用于放置返回按钮或是其他图标，title标题*/
	width: 750rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page_title_line_left{
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page_title_line_middle{
	width: 550rpx;
	height: 100rpx;
	color: #fff;
	font-size: 32rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
}
.page_title_line_bigMiddle{
	width: 680rpx;
	height: 100rpx;
	color: #fff;
	font-size: 39rpx;
	line-height: 100rpx;
	text-align: left;
	font-family: MicrosoftYaHei;
	font-weight: bold;
}
/*content区域*/
.page_contentArea{
	width: 750rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-grow: 1; /*表示占用title区域外的所有*/
	overflow-y: auto;
	/* border-bottom: 1rpx #AEAEAE solid; */ /*下边框样式*/
}

/*空行*/
.space_25{
	width:700rpx;
	height:25rpx;
	flex-shrink: 0; /*表示不可被压缩*/
}
.space_120{
	width:700rpx;
	height:120rpx;
	flex-shrink: 0; /*表示不可被压缩*/
}
.space_80{
	width:700rpx;
	height:80rpx;
	flex-shrink: 0; /*表示不可被压缩*/
}

/*内容块样式*/
.r_img_box{ /*首行图片*/
	width: 700rpx;
	height: 550rpx;  
	display: flex;
	justify-content: center;
	align-items: center;
	
	margin-top: 20rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.r_img{
	width: 700rpx;
	height: 550rpx; 
	border-radius: 15rpx;
}
.r_box{ 
	width: 700rpx;
	/* height: 600rpx; //由于项目描述有可能多行，因此这里不设固定高度 */ 
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #ffffff;  
	border-radius: 15rpx;
	margin-top: 20rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.r_box_row1{ /*活动名称*/
	width: 700rpx;
	min-height: 100rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #515151;
	font-size: 36rpx;
	line-height: 100rpx;
	text-align: left;
	font-family: MicrosoftYaHei;
	font-weight: 900;
	border-bottom: 2rpx #E1E1E1 dashed;
	margin-top: 10rpx;
}
.r_box_row2{ /* 普通的左右结构的行 */
	width: 700rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.r_box_row2_L{ /* 左侧标题 */
	width: 100rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.r_box_row2_R{ /* 右侧文字 */
	width: 600rpx;
	height: 60rpx;
	color: #515151;
	font-size: 32rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 60rpx;
}
.r_box_row2_textarea{ /* 右侧有折行的左右结构的行 */
	width: 700rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	min-height: 60rpx;
	color: #515151;
	font-size: 32rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 60rpx;
	margin-top: 10rpx;
}
.r_box_row2_R_textarea{ /* 有折行的右侧文字区 */
	width: 600rpx;
	min-height: 60rpx;
	color: #515151;
	font-size: 32rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 60rpx;
	/* flex-shrink: 0; *//*不可被压缩*/
}
.r_btn{
	width: 650rpx;
	height:100rpx; 
	background-color: #1485ff;
	color: #fff;
	border-radius: 50rpx;
	font-size: 38rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 900;
}
.btn_notClick{ /*按钮置灰*/
	filter: grayscale(1);
}
/*底部悬浮按钮*/
.hover_btn_box{ 
	position: fixed;
	width: 650rpx;
	height:100rpx; 
	bottom: 150rpx; /*需要将底部导航条的高度去除（高度约150rpx），如果有底部导航条，这项设置为200rpx，可以在页面中控制*/
	background-color: #1485ff;
	color: #fff;
	border-radius: 50rpx;
	font-size: 38rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 900;
}

/*用于显示已报名用户的姓名与电话*/
.pop_box{
	width: 700rpx;
	height: 500rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 20rpx 20rpx 0 0 !important;
}
.pop_lineT{ /*弹框标题*/
	width: 600rpx;
	height: 100rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #DB7093;
	font-size: 50rpx;  
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 900;
	line-height: 100rpx;
	margin-top: 30rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.pop_line1{ /*文字行：黑色标题字*/
	width: 600rpx;
	height: 110rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #A9A9A9;
	font-size: 46rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	font-weight: 900;
	line-height: 110rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.pop_line2{ /*按钮行*/
	width: 600rpx;
	height: 130rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0; /*不可被压缩*/
}
.pop_btn{
	width: 550rpx;
	height:100rpx; 
	background-color: #1485FF;
	color: #F2F2F2;
	border-radius: 16rpx;
	font-size: 48rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	/* font-weight: 900; */
	margin-top: 30rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.space_xx{
	width:700rpx;
	height:0rpx;
	flex-shrink: 0; /*表示不可被压缩*/
}
</style>
